﻿@model BudgetMealsModels.Entities.Recipe
@{ Html.RenderPartial("TinyMCE", new string[] { "#Instructions", "#Summary" }); }
<script type="text/javascript" language="javascript">
    fields=0;
    @if (@Model.Ingredients != null)
    {
        @:fields = @Model.Ingredients.Count;
    }
    images= 0;
    function sendNumber() {
        input = document.createElement('input');
        input.setAttribute('type', 'hidden');
        input.setAttribute('name', 'number');
        input.setAttribute('value', fields);
        document.getElementById('Ingredients').appendChild(input);
        inputImages = document.createElement('inputImages');
        inputImages.setAttribute('type', 'hidden');
        inputImages.setAttribute('name', 'inputImages');
        inputImages.setAttribute('value', images);
        document.getElementById('Ingredients').appendChild(inputImages);

    }
    function addImage(){
        Imagetag = document.createElement('input');
        Imagetag.setAttribute("type","image");
        Imagetag.setAttribute("name", "image" + images);
        document.getElementById("Image").appendChild(Imagetag);
        images = images + 1;
    }
    function addIngredient() {
        
        if (fields != 20){
        
            div = document.createElement('div');
            div.setAttribute('class', 'Ingredient');
            if(fields == 0)
            {
                dummytext = document.createElement('Label');
                dummytext.setAttribute('id', 'dummyName');
                dummytext.className += 'example';
                dummytext.innerHTML = "Ex: Sugar";
                div.appendChild(dummytext);
                dummytext2 = document.createElement('Label');
                dummytext2.setAttribute('id', 'dummyMeasurement');
                dummytext2.className += 'example';
                dummytext2.innerHTML = "Ex: 2 cups";
                div.appendChild(dummytext2);
                dummytext3 = document.createElement('Label');
                dummytext3.setAttribute('id', 'dummyCost');
                dummytext3.className += 'example';
                dummytext3.innerHTML = "Ex: .99";
                div.appendChild(dummytext3);
                div.appendChild(document.createElement('br'));

            }



            nametag = document.createElement('Label');
            nametag.setAttribute("value", "Name ");
            nametag.innerHTML = "Name ";
            nametag.className += 'editor-label';
            div.appendChild(nametag);

            nameInput = document.createElement('input');
            nameInput.setAttribute('type', 'text');
            nameInput.setAttribute('name', 'name' + fields);
            nameInput.className += 'editor-field';
            div.appendChild(nameInput);

            measurementtag = document.createElement('Label');
            measurementtag.setAttribute("value", "Measurement ");
            measurementtag.innerHTML = "Measurement "
            measurementtag.className += 'editor-label';
            div.appendChild(measurementtag);

            measurementInput = document.createElement('input');
            measurementInput.setAttribute('type', 'text');
            measurementInput.setAttribute('name', 'measurement' + fields);
            measurementInput.className += 'editor-field';
            div.appendChild(measurementInput);


            costtag = document.createElement('Label');
            costtag.setAttribute("value", "Cost ");
            costtag.innerHTML = "Cost "
            costtag.className += 'editor-label';
            div.appendChild(costtag);

            costInput = document.createElement('input');
            costInput.setAttribute('type', 'text');
            costInput.setAttribute('name', 'cost' + fields);
            costInput.className += 'editor-field';
            div.appendChild(costInput);

            document.getElementById('Ingredientes').appendChild(div);
            fields += 1;
        } else {
            alert("Only 20 Ingredients per recipe");
        }
    }

</script>
@{
    ViewBag.Title = "Edit";
} 

<p />
@*<div class="editor-label">Recipe Images</div>
<div class="editor-field">
<iframe width="100%" height="190px"frameborder="0" src="@Url.Action("AddImage", "Recipe", new { redirectURL = Request.Url.PathAndQuery })"> 
</iframe>
</div>
*@
@using (Html.BeginForm())
{
    if (Model.Ingredients != null)
    {
        @Html.Hidden("Ingred", Model.Ingredients.Count)
    }
    else
    {
        @Html.Hidden("Ingred", 0)
    }
    @Html.ValidationSummary()
    @*@Html.EditorForModel()*@
    @Html.HiddenFor(x => x.RecipeID)
    @Html.HiddenFor(x => x.UserCreated)
    @Html.HiddenFor(x => x.UserCreatedID)
    <div id="Description" style="height: 60px; width: 650px;">
        <div id="RecipeName" style="float: left;">
            <div class="editor-label">
                @Html.LabelFor(x => x.Name)
            </div>
            <div class="editor-field">
                @Html.EditorFor(x => x.Name)
            </div>
        </div>
        <div class="RecipeType" style="margin-left:20px; display:inline-block;">
            <div class="editor-label">
                Recipe Type
            </div>
            <div class="editor-field">
                <select name="RecipeType" id="RecipeType">
                    <option value="Appetizer">Appetizer</option>
                    <option value="Condiment">Condiment</option>
                    <option value="Dessert">Dessert</option>
                    <option value="Drink">Drink</option>
                    <option value="Entree">Entree</option>
                    <option value="Salad">Salad</option>
                    <option value="SideDish">Side Dish</option>
                    <option value="Snack">Snack</option>
                    <option value="Soup">Soup</option>
                    <option value="Other">Other...</option>
                </select>
            </div>
        </div>
        <div class="RecipeEthnicity" style="margin-left:50px; display:inline-block;">
            <div class="editor-label">
                Ethnicity
            </div>
            <div class="editor-field">
                <select name="RecipeEthnicity" id="RecipeEthnicity">
                    <option value="American">American</option>
                    <option value="Cajun">Cajun</option>
                    <option value="French">French</option>
                    <option value="Hispanic">Hispanic</option>
                    <option value="Indian">Indian</option>
                    <option value="Italian">Italian</option>
                    <option value="Mediterranean">Mediterranean</option>
                    <option value="MiddleEastern">Middle Eastern</option>
                    <option value="Oriental">Oriental</option>
                    <option value="Other">Other...</option>
                </select>
            </div>
        </div>
        <div id="RecipeServing" style="float: right;">
            <div class="editor-label">
                Serving Size
            </div>
            <div class="editor-field">
                @Html.EditorFor(x => x.ServingSize)
            </div>
        </div>
    </div>
    <div id="TypeEthnic">

    </div>
    <div id="RecipeInstructions">
        <div class="editor-label">
            @Html.LabelFor(x => x.Instructions)
        </div>
        <div class="editor-field">
            @Html.TextAreaFor(x => x.Instructions, 7, 79, null)
        </div>
    </div>
    <div id="RecipeSummary" style="margin-bottom: 25px;">
        <div class="editor-label">
            @Html.LabelFor(x => x.Summary)
        </div>
        <div class="editor-field">
            @Html.TextAreaFor(x => x.Summary, 7, 79, null)
        </div>
    </div>
    @Html.EditorFor(x=>x.Ingredients)
    if (Model.Ingredients != null)
    {

    }
    <div id = "Ingredientes"></div>
    <input type="button" onclick="addIngredient()" name="Add ingredients" value="Add ingredients"/>
    <div id="Image"></div>
<input type="submit" value="submit" onclick="sendNumber()" />

}
